/*
 * Retina Sprites for Compass
 * by:              Gaya Kessler
 * last update:     03/11/14
 *
 * Usage:
 * 1. create two folders in your image directory (in this case 'icons' and 'icons-2x').
 * 2. adjust the foldernames defined below if you use different names.
 * 3. create sprite images for pixel ratio 1 screens and put them in the first folder.
 * 4. create sprite images for pixel ratio 2 screens and put them in the second folder, use the same filenames.
 * 5. use the sprite-image in your Sass/Scss using: '@include use-sprite(<sprite-name>)'
 */

//Sprite mixin, works perfectly with standard defines
@mixin use-sprite($sprite, $map, $map-2x, $sprite_url, $sprite_url-2x) {
  @if($sprite_url){
    background-image: $sprite_url;
  } @else {
    background-image: sprite-url($map);
  }

  background-position: sprite-position($map, $sprite);
  background-repeat: no-repeat;
  overflow: hidden;
  display: block;
  height: image-height(sprite-file($map, $sprite));
  width: image-width(sprite-file($map, $sprite));

  @media (-webkit-min-device-pixel-ratio: 2), (-o-min-device-pixel-ratio: 3/2), (min--moz-device-pixel-ratio: 2), (min-device-pixel-ratio: 2), (min-resolution: 144dppx) {
    @if($sprite_url-2x){
      background-image: $sprite_url-2x;
    } @else {
      background-image: sprite-url($map-2x);
    }
    background-size: (image-width(sprite-path($map-2x)) / 2) (image-height(sprite-path($map-2x)) / 2);
    background-position: round(nth(sprite-position($map-2x, $sprite), 1) / 2) round(nth(sprite-position($map-2x, $sprite), 2) / 2);
    height: image-height(sprite-file($map-2x, $sprite)) / 2;
    width: image-width(sprite-file($map-2x, $sprite)) / 2;
  }
}

@mixin all-sprites-retina($map, $map-2x) {
  $name: sprite-map-name($map);
  $sprite_url: sprite-url($map);
  $sprite_url-2x: sprite-url($map-2x);
  @each $sprite in sprite-names($map) {
    .#{$name}-#{$sprite} {
      @include use-sprite($sprite, $map, $map-2x, $sprite_url, $sprite_url-2x);
    }
  }
}